<template>
	<view class="page flex flex-col">
		<navbar :leftText="'团队设备'" :backStatus="true"></navbar>
		<view class="w690 flex-1" style="overflow-y: hidden;">
			<!-- <view>
				<up-tabs :list="list1" @click="click" lineWidth="60" :lineColor="`url(${lineBg}) 100% 100%`"
					lineColor="#38FDFF" :activeStyle="{
            color: '#FFFFFF',
            fontWeight: 'bold'
        }" :inactiveStyle="{
            color: '#FFFFFF ',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 20px; padding-right: 20px; height: 30px;"></up-tabs>
			</view> -->
			<!-- 设备列表 -->
			<view class="flex flex-col" id="teamDevice" style="overflow-y: hidden;background-color: #11102A;">
				<view v-if="teamList.length>0">
					<scroll-view class="scroll-view_H " @scrolltolower="teamlower" :style="{ height: scrollHeight }"
						scroll-y="true" @scroll="scroll">
						<view class="deviceItem" @click="goDeviceDetail(item)" v-for="(item,index) in teamList">
							<view class="flex-start deviceMember">
								<view>
									<image style="width:74rpx;height:74rpx;margin-right:14rpx;"
										src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/tuandui-icon%402x.png"
										mode="aspectFill"></image>
								</view>
								<view>
									<view>{{item.name || '--'}}</view>
									<view class="teamPhone">联系电话：
										<text>{{item.mobile}}</text>
									</view>
								</view>
							</view>
							<view class="flex-between deviceNum">
								<view class="flex-start">
									<view class="deviceNumItem">设备数量:</view>
									<view>{{item.teamDeviceNum}}</view>
								</view>
								<view class="flex-start">
									<view class="deviceNumItem">团队长人数:</view>
									<view>{{item.teamMemberNum}}人</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view v-else class="flex-center" :style="{ height: scrollHeight }">
					<noData :width="250" :height="250"
						:imgUrl="'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif'"></noData>
				</view>
			</view>

		</view>



	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	let imageUrl = ref("");
	// 滚动区域的高度
	const scrollHeight = ref();
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;

		uni.getSystemInfo({
			success: function(res) {
				const query = wx.createSelectorQuery()
				query.select('#teamDevice').boundingClientRect()
				// 获取滚动容器css数据
				query.exec((resData) => {
					console.log("resData", resData);
					if (resData && resData.length) {
						// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
						scrollHeight.value = res.windowHeight - resData[0].top + 'px'
					}
				})
			}
		})

		// 获取团队设备列表
		getTeamDevice()
	})

	// 团队设备列表
	const teamList = ref([])

	// 团队设备总数
	const teamListTotal = ref(0);

	const pageNumber = ref(1);

	const pageSize = ref(30)

	// 获取团队设备列表
	const getTeamDevice = () => {
		let e = {
			url: '/app-api/device/team-agent',
			data: {
				pageNo: pageNumber.value,
				pageSize: pageSize.value,
				levelId: uni.getStorageSync("levelId"),
				deviceType: "router"
			}
		};
		api.default.get(e).then((res) => {

			if (pageNumber.value == 1) {
				// res.data.list
				teamList.value = res.data.list;
			} else {
				teamList.value = teamList.value.concat(res.data.list);
			}

			teamListTotal.value = res.data.total

			// zongTeamShowYi.value = res.data;
		})
	}

	// 上拉刷新
	const teamlower = () => {
		console.log("5555555555");
		if (teamListTotal.value > teamList.value.length) {
			pageNumber.value++;

			// 调用分润列表
			getTeamDevice()
		}

	}

	// 去设备详情
	let goDeviceDetail = (val) => {
		uni.navigateTo({
			url: "/pages/index/indexChild/teamDeviceDetail?toUid=" + val.toUid
		})
	}
</script>

<style scoped>
	.scroll-view_H {
		font-size: 28rpx;
		overflow: hidden;
		color: #fff;
		/* background-color: #e43; */
	}

	.classifyMain {
		color: #fff;
	}

	.defaultClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg1%402x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}

	.activeClassify {
		width: 134rpx;
		height: 48rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/leibie-bg2@2x.png") no-repeat;
		background-size: 100% 100%;
		font-size: 26rpx;
	}

	.deviceItem {
		/* height: 216rpx; */
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/tuanduishuju-bg@2x.png") no-repeat;
		background-size: 100% 100%;
		margin-bottom: 16rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
	}

	.teamPhone {
		font-size: 22rpx;
		color: #5A669E;
		margin-top: 4rpx;
	}

	.teamPhone>text {
		color: #fff;
	}

	.deviceMember {
		padding-bottom: 18rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #1F1757;
	}

	.deviceNum {
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.deviceNumItem {
		font-size: 22rpx;
		color: #5A669E;
		margin-right: 12rpx;
	}

	.device_H {
		padding-bottom: 10rpx;
		box-sizing: border-box;
	}
</style>